<template>
  <div>
    <van-tabs v-model="recordType">
      <van-tab title="全部" name="all"></van-tab>
      <van-tab title="待审核" name="wait"></van-tab>
      <van-tab title="通过" name="success"></van-tab>
      <van-tab title="未通过" name="fail"></van-tab>
    </van-tabs>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
      <!-- @load="onLoad"  -->
      <van-cell v-for="item in showList" :key="item.id" class="article-item">
        <template #title>
          <div class="head">
            <!-- <img :src="item.avatar" alt="" /> -->
            <!-- <img src="../assets/img/zhelilogo.png" alt="" /> -->
            <div class="con">
              <p class="title van-ellipsis">
                {{ item.laifangxingming }} - {{ item.lianxishouji }}
              </p>
            </div>
          </div>
          <van-icon name="clock-o" />
          <i class="other">
            {{ item.laifangshijian }} -- {{ item.likaishijian }}</i
          >
        </template>
        <template #label>
          <div class="body van-multi-ellipsis--l2" @click="handleClick(item)">
            审核回复：{{ item.shhf || "暂时还没有回复哦，请耐心等待~~" }}
          </div>
          <div class="foot">
            审核结果：
            <span
              :style="{
                color:
                  item.sfsh === '是' ? 'blue' : item.sfsh === '否' ? 'red' : '',
              }"
            >
              {{ shMapping(item.sfsh) }}
            </span>
          </div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
/* eslint-disable */
import { buildURLWithParams } from "@/utils";
import {
  fangkexinxi_add,
  fangkexinxi_update,
  fangkexinxi_delete,
  fangkexinxi_page,
} from "@/api";
import { getLocal } from "@/utils";

export default {
  name: "record-item",
  data() {
    return {
      list: [],
      showList: [],
      current: 1,
      sorter: "weight_desc",
      loading: false,
      finished: true,
      page: 1,
      recordType: "all",
    };
  },
  methods: {
    handleClick(item) {
      const path = buildURLWithParams("/record-detail", item);
      this.$router.push(path);
    },
    // clearHtmlTag(str) {
    //   return str.replace(/<[^>]+>/g, "");
    // },
    async fangkexinxiPage(payload = {}) {
      payload.laifangxingming = this.visitorData.name;
      payload.limit = 9999;
      const res = await fangkexinxi_page(payload);
      this.list = res.data.list.reverse();
      this.showList = this.list;
    },
    getDetail() {
      this.visitorData = getLocal("visitorData");
    },
    shMapping(str) {
      if (str === "是") {
        return "通过";
      } else if (str === "否") {
        return "未通过";
      } else {
        return str;
      }
    },
    // async onLoad() {
    //   if (this.select === "article") {
    //     console.log("正在加载新的数据");
    //     const res = await getArticle({
    //       current: this.current,
    //       sorter: this.sorter,
    //     });
    //     console.log(res.data);
    //     // console.log(res.data.rows)
    //     this.list = this.list.concat(res.data.rows);
    //     console.log(this.list);
    //     this.current++;
    //     this.loading = false;

    //     if (this.current > res.data.pageTotal) {
    //       this.finished = true;
    //     }
    //   } else if (this.select === "like") {
    //     // 异步更新数据
    //     // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //     const { data } = await getArticlesLike({ page: this.page });
    //     this.list.push(...data.rows);
    //     this.loading = false;
    //     if (this.page === data.pageTotal || !data.rows.length) {
    //       this.finished = true;
    //     } else {
    //       this.page++;
    //     }
    //   } else if (this.select === "collect") {
    //     // 异步更新数据
    //     const { data } = await getArticlesCollect({ page: this.page });
    //     this.list.push(...data.rows);
    //     this.loading = false;
    //     if (this.page === data.pageTotal || !data.rows.length) {
    //       this.finished = true;
    //     } else {
    //       this.page++;
    //     }
    //   }
    // },
  },
  watch: {
    check: {
      handler(val) {
        console.log(val);
        this.sorter = this.check;
        this.current = 1;
        this.finished = false;
        this.list = [];
        this.loading = true;
        // this.onLoad();
      },
    },
    $route(to, from) {
      if (to.path === "/record") {
        this.getDetail();
        this.fangkexinxiPage();
      }
    },
    recordType: function (newVal) {
      if (newVal === "all") {
        this.showList = this.list;
      } else if (newVal === "wait") {
        this.showList = this.list.filter((item) => item.sfsh === "待审核");
      } else if (newVal === "success") {
        this.showList = this.list.filter((item) => item.sfsh === "是");
      } else if (newVal === "fail") {
        this.showList = this.list.filter((item) => item.sfsh === "否");
      }
    },
  },
  created() {
    this.getDetail();
    this.fangkexinxiPage();
  },
};
</script>

<style lang="less" scoped>

.article-item {
  // border: 3px solid yellow;
  margin-top: 1vh;
  border-radius: 12px;
  width: 95vw;
  .head {
    display: flex;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
    .con {
      flex: 1;
      overflow: hidden;
      padding-left: 10px;
      p {
        margin: 0;
        line-height: 1.5;
        &.title {
          font-size: larger;
          font-weight: 600;
          width: 280px;
        }
        &.other {
          font-size: 10px;
          color: #999;
        }
      }
    }
  }
  .body {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-top: 10px;
  }
  .foot {
    display: flex;
    justify-content: center; /* 水平居中 */
    font-size: 12px;
    color: #999;
    margin-top: 10px;
  }
}
</style>
